<template>
    <!-- 经理名片 -->
    <div class="manager-info">
        <div class="card cursor-pointer" @click="intoDetail">
            <img class="card-bg" src="@/assets/img/financialShop/mingpianbeijing.png" alt="" />
            <div class="info">
                <img v-show="manageInfo.mgrAvatar" :src="manageInfo.mgrAvatar" alt="" srcset="" />
                <div class="main">
                    <div class="text-one-ellipsis">{{ manageInfo.userName }}</div>
                    <div class="text-one-ellipsis">{{ manageInfo.postName }}</div>
                    <div class="text-one-ellipsis">{{ manageInfo.orgName }}</div>
                    <div class="text-three-ellipsis">{{ manageInfo.intro }}</div>
                </div>
            </div>
        </div>
        <div class="btns-list">
            <div class="item cursor-pointer" @click="openDialog(1)">
                <img src="@/assets/img/financialShop/erweima.png" alt="" srcset="" />
                <span>个人二维码</span>
            </div>
            <div class="item phone cursor-pointer">
                <img src="@/assets/img/financialShop/shoujihaoma.png" alt="" srcset="" />
                <span class="mobile" @click="telPhone(manageInfo.mobile)">{{ manageInfo.mobile }}</span>
            </div>
            <div class="item cursor-pointer" @click="shareShop">
                <img src="@/assets/img/financialShop/fenxiangxiaodian.png" alt="" srcset="" />
                <span>分享小店</span>
            </div>
        </div>
        <div class="showQR cursor-pointer" v-show="showQRcode" @click.stop.prevent="showQRcode = false">
            <img v-if="dialogType == 1" :src="manageInfo.qrcode" alt="" @click.stop.prevent="clickQR" />
            <div class="desc" v-if="dialogType == 1">长按图片可进行添加客户经理操作</div>
            <img class="arrows" v-if="dialogType == 2" src="@/assets/img/guide.png" alt="" />
        </div>
    </div>
</template>
<script>
    import * as utils from '@/utils/util';
    import financialApi from '@/api/financial-shop.js';
    export default {
        components: {},
        data() {
            return {
                isSharePage: 0,
                dialogType: '',
                showQRcode: false,
                manageInfo: {}
            };
        },
        props: {
            wxUserId: {
                type: String,
                default: ''
            },
            wxExternalUserid: {
                type: String,
                default: ''
            },
            sort: {
                type: Number,
                default: 0
            }
        },
        watch: {
            '$store.state.vuex_updateManageInfo': function () {
                if (this.$store.state.vuex_updateManageInfo) {
                    this.getManageInfo();
                }
            }
        },
        created() {},
        mounted() {
            this.isSharePage = this.$store.state.vuex_isSharePage;
            this.getManageInfo();
        },
        methods: {
            clickQR() {
                //
            },
            openDialog(type) {
                if (this.$route.path != '/financialShop/paper/index') {
                    this.$sensorsSend('MktClick', {
                        recommend_id: this.$store.state.vuex_wxUserId,
                        $title: '首页',
                        mkt_type: '',
                        mkt_name: '经理名片二维码',
                        mkt_location: this.sort,
                        mkt_content_name: '金融小店',
                        mkt_content_type: '经理名片二维码'
                    });
                    let urls = this.$utils.getShareUrl('financialShop', { radar_type_code: '00', radar_code: 'wes', radar_name: '金融小店' });
                    this.$wxShare.setShareInfo(
                        {
                            title: `${this.manageInfo.userName || '客户经理'}的金融小店`, // 分享标题
                            desc: this.manageInfo.intro || '这是我的金融小店！快来加入吧', // 分享描述
                            link: urls, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: `${utils.apiUrl}${this.manageInfo.mgrAvatar || '/mfs/avatar.jpg'}`
                        },
                        () => {
                            // alert('分享成功')
                        }
                    );
                }
                this.dialogType = type;
                this.showQRcode = true;
            },
            intoDetail() {
                this.$sensorsSend('MgrDetailView', { recommend_id: this.$store.state.vuex_wxUserId });
                this.$router.push({
                    path: '/financialShop/customer-manager-detail',
                    query: {
                        wxUserId: this.wxUserId,
                        isSharePage: this.isSharePage || ''
                    }
                });
            },
            shareShop() {
                this.$sensorsSend('ShareShop', { recommend_id: this.$store.state.vuex_wxUserId });
                let entry = this.$store.state.vuex_entry;
                if (entry === 'single_chat_tools' || entry === 'group_chat_tools' || entry === 'chat_attachment') {
                    let urls = this.$utils.getShareUrl('financialShop', { radar_type_code: '00', radar_code: 'wes', radar_name: '金融小店' });
                    this.$wxApi
                        .sendChatMessage('news', {
                            link: urls,
                            title: `${this.manageInfo.userName || '客户经理'}的金融小店`,
                            desc: this.manageInfo.intro || '这是我的金融小店！快来加入吧',
                            imgUrl: `${utils.apiUrl}${this.manageInfo.mgrAvatar || '/mfs/avatar.jpg'}`
                        })
                        .then((res) => {});
                } else {
                    this.openDialog(2);
                }
            },
            telPhone(phone) {
                this.$sensorsSend('MktClick', {
                    recommend_id: this.$store.state.vuex_wxUserId,
                    $title: '首页',
                    mkt_type: '',
                    mkt_name: '经理名片拨打电话',
                    mkt_location: this.sort,
                    mkt_content_name: '金融小店',
                    mkt_content_type: '经理名片拨打电话'
                });
                if (utils.isPcWeixin()) return;
                let a = document.createElement('a');
                a.setAttribute('href', `tel:${phone}`);
                a.click();
            },
            // 获取经理信息
            getManageInfo() {
                financialApi
                    .getManageInfo({
                        wxUserId: this.wxUserId
                    })
                    .then((res) => {
                        this.manageInfo = res.data.data;
                        this.manageInfo.mgrAvatar = this.manageInfo.mgrAvatar || '/mfs/avatar.jpg';
                        this.$store.commit('updateVuexUpdateManageInfo', false);
                        let urls = this.$utils.getShareUrl('financialShop', { radar_type_code: '00', radar_code: 'wes', radar_name: '金融小店' });
                        if (this.$route.path != '/financialShop/paper/index') {
                            this.$wxShare.setShareInfo(
                                {
                                    title: `${this.manageInfo.userName || '客户经理'}的金融小店`, // 分享标题
                                    desc: this.manageInfo.intro || '这是我的金融小店！快来加入吧', // 分享描述
                                    link: urls, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                    imgUrl: `${utils.apiUrl}${this.manageInfo.mgrAvatar || '/mfs/avatar.jpg'}`
                                },
                                () => {
                                    // alert('分享成功')
                                }
                            );
                        }
                    });
            }
        }
    };
</script>
<style scoped lang="scss">
    .manager-info {
        width: 100%;
        margin: 8px 0;
        overflow: hidden;
        .card {
            position: relative;
            width: 100%;
            height: 160px;
            overflow: hidden;
            .card-bg {
                width: 100%;
                height: 100%;
            }
            .info {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 16px 0 13px;
                img {
                    width: 120px;
                    height: 120px;
                    border-radius: 50%;
                    border: 2px solid rgba(233, 210, 122, 0.15);
                }
                .main {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    height: 100%;
                    justify-content: flex-end;
                    div {
                        font-size: 12px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: rgba(255, 255, 255, 0.8);
                        text-shadow: 0px 3px 6px rgba(181, 181, 181, 0.16);
                        width: 148px;
                        text-align: right;
                        max-width: 148px;
                    }
                    :nth-child(1) {
                        color: #fff;
                        font-size: 20px;
                        margin-bottom: 10px;
                    }
                    :nth-child(4) {
                        margin: 16px 0;
                        margin-top: 8px;
                    }
                }
            }
        }
        .btns-list {
            margin-top: 0.27rem 0;
            padding: 10px 0;
            display: flex;
            justify-content: space-between;
            .item {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 109px;
                height: 40px;
                background: #ffffff;
                box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
                border-radius: 20px;
                span {
                    margin-left: 5px;
                    font-size: 14px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: rgba(44, 44, 44, 0.5);
                }
                img {
                    width: 16px;
                    height: 16px;
                }
                .mobile {
                    font-size: 12px;
                }
            }
            .phone {
                font-size: 12px;
            }
        }
        .showQR {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            img {
                width: 200px;
            }
            .desc {
                font-size: 16px;
                color: #fff;
            }
            .arrows {
                width: 200px;
                position: absolute;
                top: 10px;
                right: 15px;
            }
        }
    }
</style>
